<!--
 * @Author: your name
 * @Date: 2021-02-09 12:43:03
 * @LastEditTime: 2021-02-23 19:04:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jianfa-admin\src\page\edit\index.vue
-->
<template>
  <div>
    <div class="container">
      <mavon-editor
        style="min-height: 300px"
        v-model="content"
        ref="md"
        @imgAdd="$imgAdd"
        @imgDel="$imgDel"
        @change="change"
        :subfield="false"
        :toolbars="toolbars"
      />
      <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { compressImage } from "@/utils/compressImage"; // 图片压缩方法
export default {
  name: "markdown",
  created() {
    localStorage.getItem("edit")
      ? (this.content = JSON.parse(localStorage.getItem("edit")).content || "")
      : null;
  },
  data() {
    return {
      content: "",
      html: "",
      img_file: [],
      configs: {},
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  methods: {
    $imgDel(filename) {
      console.log("filename :>> ", filename);
      console.log("this.img_file :>> ", this.img_file);
      this.img_file.splice(filename[0] - 1, 1, null);
      console.log("this.img_file :>> ", this.img_file);
    },
    // 将图片上传到服务器，返回地址替换到md中
    async $imgAdd(pos, $file) {
      // 缓存图片信息
      const config = {
        width: 500, // 压缩后图片的宽
        // height: 140/250*500, // 压缩后图片的高
        quality: 1, // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
      };
      compressImage($file, config).then((result) => {
        const fileSize = parseFloat(
          parseInt(result.size) / 1024 / 1024
        ).toFixed(2); //获取图片大小 单位M
        if (!+fileSize) {
          this.img_file.push($file);
        } else {
          this.img_file.push(result);
        }
      });
    },
    // 上传图片
    async uploadimg() {
      const {
        code,
        data: { imgsInfo },
      } = await this.$api.common.addImg({ photos: this.img_file });
      if (!code) {
        const filenameLst = [];
        imgsInfo.forEach((item, index) => {
          const file = [];
          file.push(index + 1, this.IMGPATH + "/" + item.imgPath);
          filenameLst.push(file);
        });
        this.$refs.md.$imglst2Url(filenameLst);
        return true;
      }
    },
    change(value, render) {
      // render 为 markdown 解析后的结果
      /*  console.log("this.content :>> ", this.content);
      console.log("value :>> ", value);
      console.log("render :>> ", render); */
      // console.log("value :>> ", value);
      // console.log("render :>> ", render);
      this.html = render;
    },
    async submit() {
      /*  console.log(this.content);
      console.log(this.html); */

      localStorage.removeItem("edit");
      const res = await this.uploadimg();
      if (res) {
        localStorage.setItem(
          "edit",
          JSON.stringify({
            content: this.content,
            html: this.html,
          })
        );
      }

      this.$message.success("提交成功！");
    },
  },
};
</script>
<style scoped lang='scss'>
.editor-btn {
  margin-top: 20px;
}
</style>